<template>
  <div class="classify">
    <div class="table-box">
      <IconTitle title="基本信息" imgUrl="yunwei">
        <span class="slot">品牌管理</span>
      </IconTitle>
      <div class="table-box">
        <div class="echarts-box">
          <el-row class="classifyInfo">
            <el-col :span="10" class="left">
              <div style="height: 172px;line-height: 172px;color: #777777;">
                统计时间 【2022-2-12 23:59:59】
              </div>
            </el-col>
            <el-col :span="4" class="middle">
              <img src="@/static/imgs/ctgInfo.png"/>
            </el-col>
            <el-col :span="10" class="right">
              <el-row>
                <el-col :span="8">
                  <el-row>
                    <el-col :span="16">
                      <p>设备数量</p>
                      <p>253</p>
                    </el-col>
                    <el-col :span="8" style="background: rgb(233, 233, 233);width: 1px;height: 68px;margin-top: 50px;"></el-col>
                  </el-row>
                </el-col>
                <el-col :span="8">
                  <el-row>
                    <el-col :span="16">
                      <p>设备类别</p>
                      <p>13</p>
                    </el-col>
                    <el-col :span="8" style="background: rgb(233, 233, 233);width: 1px;height: 68px;margin-top: 50px;"></el-col>
                  </el-row>
                </el-col>
                <el-col :span="8">
                  <p>设备位置</p>
                  <p>8</p>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>

    <div class="table-box">
      <IconTitle title="类别统计" imgUrl="yunwei">
        <span class="slot">设备类别</span>
      </IconTitle>
      <div class="echarts-box">
        <el-row :gutter="10">
          <el-col :span="12"
          >
            <div class="echarts-item echarts-item-classify ">
              <div class="item-title">
                <i class="icon-ziliao"></i>
                <span>设备数量</span>
                <p>num</p>

              </div>
              <div id="equipment-count" style="width: 100%;height:330px;"></div>
            </div>
          </el-col
          >
          <el-col :span="12"
          >

            <div class="echarts-item echarts-item-classify">
              <div class="item-title">
                <i class="icon-ziliao"></i>
                <span>购置金额</span>
                <p>price</p>
              </div>
              <div id="buy-amount" style="width: 100%;height:330px;"></div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="table-box">
      <IconTitle title="位置统计" imgUrl="yunwei">
        <span class="slot">设备位置</span>
      </IconTitle>
      <div class="echarts-box">
        <el-row :gutter="10">
          <el-col :span="12"
          >
            <div class="echarts-item echarts-item-classify ">
              <div class="item-title">
                <i class="icon-ziliao"></i>
                <span>设备数量</span>
                <p>num</p>

              </div>
              <div id="position-equipment-count" style="width: 100%;height:330px;"></div>
            </div>
          </el-col
          >
          <el-col :span="12"
          >

            <div class="echarts-item echarts-item-classify">
              <div class="item-title">
                <i class="icon-ziliao"></i>
                <span>购置金额</span>
                <p>price</p>
              </div>
              <div id="position-buy-amount" style="width: 100%;height:330px;"></div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import IconTitle from "@/components/icon-title/index.vue";
export default {
  name: "classify",
  components: {
      IconTitle
  },

  data() {
    return {
    
    };
  },
  created() {
   
  },
  mounted() {
      this.equipmentCountEchartFun()
      this.buyAmountEchartFun()
      this.positionEquipmentCountEchartFun()
      this.positionBuyAmountEchartFun()
  },
  methods: {
      levelFormat(){},
      equipmentCountEchartFun(){
          // 基于准备好的dom，初始化echarts实例
          var myChart = this.$echarts.init(document.getElementById('equipment-count'));

          // 指定图表的配置项和数据
          var option = {
                  tooltip: {
                      trigger: 'item',
                  },
                  series: [
                      {
                          name: '',
                          type: 'pie',
                          radius: '55%',
                          center: ['40%', '50%'],
                          data:  [
                              { value: 1048, name: '其它设备',itemStyle:{color:'#5087EC'} },
                              { value: 735, name: '冲压设备',itemStyle:{color:'#5087EC' }},
                              { value: 580, name: '数控设备',itemStyle:{color:'#68BBC4' }},
                              { value: 484, name: '注塑成型机',itemStyle:{color:'#58A55C' }},
                              { value: 300, name: '焊机' ,itemStyle:{color:'#F2BD42'}},
                              { value: 1048, name: '打包设备',itemStyle:{color:'#EE752F'} },
                              { value: 735, name: '空压机',itemStyle:{color:'#D95040' }},
                              { value: 580, name: '制冷设备',itemStyle:{color:'#5087EC' }},
                              { value: 484, name: '真空干燥炉',itemStyle:{color:'#68BBC4' }},
                              { value: 300, name: '锻造设备' ,itemStyle:{color:'#58A55C'}},
                              { value: 1048, name: '清洗设备',itemStyle:{color:'#F2BD42'} },
                              { value: 735, name: '提取设备',itemStyle:{color:'#EE752F' }},
                              { value: 580, name: 'avg',itemStyle:{color:'#D95040' }},
                          ],
                      }
                  ]
              };

          // 使用刚指定的配置项和数据显示图表。
          option && myChart.setOption(option);
      },
      buyAmountEchartFun(){
          // 基于准备好的dom，初始化echarts实例
          var myChart = this.$echarts.init(document.getElementById('buy-amount'));

          // 指定图表的配置项和数据
          var option = {
              tooltip: {
                  trigger: 'item'
              },
              series: [
                  {
                      name: '',
                      type: 'pie',
                      radius: ['40%','60%'],
                      itemStyle: {
                          borderRadius: 5,
                          borderColor: '#fff',
                          borderWidth: 0
                      },
                      data: [
                          { value: 1048, name: '其它设备',itemStyle:{color:'#5087EC'} },
                          { value: 735, name: '冲压设备',itemStyle:{color:'#5087EC' }},
                          { value: 580, name: '数控设备',itemStyle:{color:'#68BBC4' }},
                          { value: 484, name: '注塑成型机',itemStyle:{color:'#58A55C' }},
                          { value: 300, name: '焊机' ,itemStyle:{color:'#F2BD42'}},
                          { value: 1048, name: '打包设备',itemStyle:{color:'#EE752F'} },
                          { value: 735, name: '空压机',itemStyle:{color:'#D95040' }},
                          { value: 580, name: '制冷设备',itemStyle:{color:'#5087EC' }},
                          { value: 484, name: '真空干燥炉',itemStyle:{color:'#68BBC4' }},
                          { value: 300, name: '锻造设备' ,itemStyle:{color:'#58A55C'}},
                          { value: 1048, name: '清洗设备',itemStyle:{color:'#F2BD42'} },
                          { value: 735, name: '提取设备',itemStyle:{color:'#EE752F' }},
                          { value: 580, name: 'avg',itemStyle:{color:'#D95040' }},
                      ],
                  }
              ]
          };

          // 使用刚指定的配置项和数据显示图表。
          option && myChart.setOption(option);
      },
      positionEquipmentCountEchartFun(){
          // 基于准备好的dom，初始化echarts实例
          var myChart = this.$echarts.init(document.getElementById('position-equipment-count'));

          // 指定图表的配置项和数据
          var option = {
              tooltip: {
                  trigger: 'item',
              },
              series: [
                  {
                      name: '',
                      type: 'pie',
                      radius: '55%',
                      center: ['40%', '50%'],
                      data:  [
                          { value: 1048, name: 'a车间',itemStyle:{color:'#5087EC'} },
                          { value: 735, name: 'b车间',itemStyle:{color:'#5087EC' }},
                          { value: 580, name: 'c车间',itemStyle:{color:'#68BBC4' }},
                          { value: 484, name: 'd车间',itemStyle:{color:'#58A55C' }},
                          { value: 300, name: 'e车间' ,itemStyle:{color:'#F2BD42'}},
                          { value: 1048, name: 'f车间',itemStyle:{color:'#EE752F'} },
                          { value: 735, name: 'g车间',itemStyle:{color:'#D95040' }},
                          { value: 580, name: 'h车间',itemStyle:{color:'#5087EC' }},
                          { value: 484, name: 'i车间',itemStyle:{color:'#68BBC4' }},
                          { value: 300, name: 'j车间' ,itemStyle:{color:'#58A55C'}},
                          { value: 1048, name: 'k车间',itemStyle:{color:'#F2BD42'} },
                          { value: 735, name: 'l车间',itemStyle:{color:'#EE752F' }},
                          { value: 580, name: 'm车间',itemStyle:{color:'#D95040' }},
                      ],
                  }
              ]
          };

          // 使用刚指定的配置项和数据显示图表。
          option && myChart.setOption(option);
      },
      positionBuyAmountEchartFun(){
          // 基于准备好的dom，初始化echarts实例
          var myChart = this.$echarts.init(document.getElementById('position-buy-amount'));

          // 指定图表的配置项和数据
          var option = {
              tooltip: {
                  trigger: 'item'
              },
              series: [
                  {
                      name: '',
                      type: 'pie',
                      radius: ['40%','60%'],
                      itemStyle: {
                          borderRadius: 5,
                          borderColor: '#fff',
                          borderWidth: 0
                      },
                      data: [
                          { value: 1048, name: 'a车间',itemStyle:{color:'#5087EC'} },
                          { value: 735, name: 'b车间',itemStyle:{color:'#5087EC' }},
                          { value: 580, name: 'c车间',itemStyle:{color:'#68BBC4' }},
                          { value: 484, name: 'd车间',itemStyle:{color:'#58A55C' }},
                          { value: 300, name: 'e车间' ,itemStyle:{color:'#F2BD42'}},
                          { value: 1048, name: 'f车间',itemStyle:{color:'#EE752F'} },
                          { value: 735, name: 'g车间',itemStyle:{color:'#D95040' }},
                          { value: 580, name: 'h车间',itemStyle:{color:'#5087EC' }},
                          { value: 484, name: 'i车间',itemStyle:{color:'#68BBC4' }},
                          { value: 300, name: 'j车间' ,itemStyle:{color:'#58A55C'}},
                          { value: 1048, name: 'k车间',itemStyle:{color:'#F2BD42'} },
                          { value: 735, name: 'l车间',itemStyle:{color:'#EE752F' }},
                          { value: 580, name: 'm车间',itemStyle:{color:'#D95040' }},
                      ],
                  }
              ]
          };

          // 使用刚指定的配置项和数据显示图表。
          option && myChart.setOption(option);
      },
  },
};
</script>
<style lang="scss" >
@import "@/styles/color.scss";
.classify{
    .classifyInfo{
      .right{
        p:nth-child(1){
          margin-top: 62px;
          color: #87888A;
        }
        p:nth-child(2){
          font-size: 30px;
          color: #262626 ;
          margin-top: 10px;
          width: 56px;
          text-align: center;
        }
      }
    }
}

</style>
